import React,{FC,useEffect,useState} from 'react';
import {useDispatch,useSelector} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as imgActions from '../../store/actions/img.action';
import {useParams} from 'react-router-dom';
import {ITypeImage} from '../../interface/img';
import style from './img.module.scss';
import SwiperDialog from './swiperDialog/index';
import BlockImage from './blockImage/index';
import Categroy from './categroy/index';

interface Istore{
    img:{
        typeImage:ITypeImage[]
    }
}

const Img:FC = function (){
    const dispatch = useDispatch();

    const {getTypeImageAction,getCurTypeAction,initTypeList} = bindActionCreators(imgActions,dispatch);
    
    const {SerialID} = useParams<{SerialID:string}>();

    const {typeImage} = useSelector((state:Istore) => state.img);

    console.log(typeImage);

    //swiper是否 显示隐藏
    const [isSwiperShow,setIsSwiperShow] = useState<boolean>(false);

    //分类图片弹窗显示隐藏
    const [isCategroyShow,setIsCategroyShow] = useState<boolean>(false);

    //页码
    const [Page,setPage] = useState<number>(1);

    //ImageID
    const [ImageID,setImageID] = useState<number>(-1);

    // hook规则

    useEffect(() => {
        //获取分类图片列表数据
        getTypeImageAction({
            SerialID
        })
    },[])

    useEffect(() => {
        if(ImageID !== -1){
            //初始化数据
            initTypeList();
            //初始化页码
            setPage(1);
            //获取数据
            getData();
        }
    }, [ImageID])

    //jia'zai
    useEffect(() => {
        if(Page !== 1){
            getData();
        }
    }, [Page])

    //设置页码
    const setPageFun = () => {
        setPage(prev => prev+1);
    }

    //显示分类弹窗
    const showCategroy = (imageID:number) => {
        setIsCategroyShow(true);
        setImageID(imageID);
        setPage(1)
    }

    //隐藏分类弹窗
    const hideCategroy = () => {
        setIsCategroyShow(false);
    }

    // 显示swiper弹窗
    const showSwiperDialog = (imageID:number) => {
        //显示弹窗
        setIsSwiperShow(true);
        //1.请求数据
        //2.准备参数
        /**
         *  SerialID:string;
            ImageID:number;
            Page:number;
            PageSize:number; 30
         * 
        */
       setImageID(imageID);
       if(imageID !== ImageID){
            setPage(1)
       }
    }

    //请求数据
    const getData = () => {
        //获取数据
        getCurTypeAction({
            SerialID,
            ImageID,
            Page,
            PageSize:6
        })
    }


    //隐藏swiper弹窗
    const hideSwiperDialog = () => {
        setIsSwiperShow(false);
    }

    return <div className={style.img_wrap}>
        <header className={style.img_header}>
            <span>颜色</span>
            <span>车型</span>
        </header>
        <div className={style.img_con}>
            {/* 大循环体 */}
            {
                typeImage.map((item) => <ul key={item.Id} className={style.img_list}>
                    {
                        item.List.map((val,index) => <li key={val.Url}>
                            {index === 0 ? <div className={style.block}>
                                <div onClick={() => showCategroy(item.Id)}>{item.Name}/{item.Count}</div>
                                <div>
                                    <img src={val.Url.replace('{0}','3')}  alt=""/>
                                </div>
                            </div>:<BlockImage index={index} ImageID={item.Id} url={val.Url} showSwiperDialog={showSwiperDialog}></BlockImage>}
                        </li>)
                    }
                </ul>)
            }
            {isCategroyShow ? <Categroy setPageFun={setPageFun} imageId={ImageID} hideCategroy={hideCategroy} showSwiperDialog={showSwiperDialog}></Categroy> :null}
            {isSwiperShow ? <SwiperDialog setPageFun={setPageFun} hideSwiperDialog={hideSwiperDialog}></SwiperDialog>: null}
        </div>
    </div>
}


export default Img